<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>修改密码</title>
    <link rel="stylesheet" href="/mcss/base.css">
    <link rel="stylesheet" href="/mcss/mregistered.css">
    <style>
        .registeredbody {
            background-color: #f2f2f2;
            width: fixed;
            height: 100%;
            width: 100%;
            position: fixed;
            top: 0;
            left: 0;
        }

        .loadingHead {
            width: 100%;
            display: flex;
            height: 4.1065rem;
            background: white;
            box-shadow: 0 0 40px #e4e4e4;
            padding-right: 1.3462rem;
            padding-left: 1.3162rem;
            box-sizing: border-box
        }

        .loadingHead .head {
            width: 100%;
            display: flex;
            justify-content: space-between;
            padding-top: 0.57rem;
            padding-bottom: 0.57rem;
            box-sizing: border-box;
        }

        .loadingHead .head img:nth-child(1) {
            height: 80%;
            width: 6rem;
            position: relative;
            transform: translateY(20%)
        }

        .loadingHead .head img:nth-child(2) {
            height: 80%;
            width: 2.35rem;
            position: relative;
            transform: translateY(20%)
        }

        .registeredbody .resetPass {
            text-align: center;
            margin-top: 2.79rem;
            font-size: 1.1rem;
            color: #818181
        }

        .register-container {
            padding-top: 2.79rem !important
        }

        .register-container .form-iputOne {
            background-color: white;
            display: flex;
            padding-top: 0.2105rem;
            padding-bottom: 0.2105rem;
            box-sizing: border-box;
        }

        .register-container .form-iputOne .enter {
            flex: 4;
            line-height: 3.1431rem;
            text-align: left;
            color: #ababab
        }

        .register-container .form-iputOne .sendCode {
            flex: 1;
            line-height: 3.1431rem;
            border-left: 1px solid #e6e6e6;
            color: #ababab;
            text-align: center
        }

        .form-iput input {
            box-sizing: border-box !important
        }

        input::-webkit-input-placeholder {
            color: #ababab;
        }

        .registeredbody .register-container .passwordprompt {
            margin-bottom: 0.5rem;
            font-size: 1rem;
            padding-left: 1.2635rem;
        }
    </style>
</head>

<body>
    <div class="registeredbody">
        <div class="loadingHead">
            <div class="head">
                <img src="/mimage/logo.png" alt="" @click="retur">
                <img src="/mimage/mylogo.png" alt="" @click="Jump">
            </div>
        </div>
        <div class="resetPass">重置密码</div>
        <div class="register-container">
            <div class="register-box">
                <div class="form-item form-iput">
                    <input type="text" placeholder="请输入找回的邮箱" v-model="emailcheck" />
                </div>
                <div class="form-item form-iput form-iputOne">
                    <div class="enter">
                        <input type="text" placeholder="请输入验证码" v-model="sendcode">
                    </div>
                    <div class="sendCode" @click="sendCode" v-html="sendcheck"></div>
                </div>
                <div class="form-item form-iput">
                    <input type="password" placeholder="请输入新密码" v-model="password" />
                </div>
                <div class="form-item form-iput">
                    <input type="password" placeholder="再次输入新密码" v-model="newpassword" />
                </div>
                <div class="passwordprompt" v-html="passwordprompt"></div>
                <button class="submitbtn registerbtn" @click="resetNow">立即重置</button>
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        var app = new Vue({
            el: ".registeredbody",
            data() {
                return {
                    sendcode: "",
                    emailcheck: "",
                    password: "",
                    sendcheck: "发送",
                    newpassword: "",
                    passwordprompt: ''
                }
            },
            created() {
                this.setRem(28.43);
                this.fontSize(106);
            },
            methods: {
                // zxmlzz14@gmail.com
                sendCode() {//验证码
                    let that = this
                    if (this.emailcheck == "") {
                        this.emailcheck = "请输入邮箱"
                        return
                    } else {
                        let params = {
                            sendTo: this.emailcheck
                        };
                        if (this.sendcheck == "发送" || this.sendcheck == "重新发送") {
                            axios.post('/yesUser/eamilcheck', { email: this.emailcheck }).then(res => {
                                if (res.data.code == 200) {
                                    this.emailcheck = '邮箱不存在'
                                } else if (res.data.code == -10002) {
                                    axios.post("/comm/mail/send", params).then(res => {
                                        if (res.data.code == 200) {
                                            let time = 60;
                                            let timer = setInterval(function () {
                                                time -= 1
                                                that.sendcheck = time
                                                if (time <= 0) {
                                                    clearInterval(timer)
                                                    that.sendcheck = "重新发送"
                                                }
                                            }, 1000)

                                        } else if (res.data.code == -10003) {
                                            this.sendcode = "邮件发送失败"
                                        } else if (res.data.code == -10008) {
                                            this.sendcode = "邮件发送失败"
                                        }
                                    });
                                }
                            })
                        }
                    }
                },
                resetNow() {
                    if (this.emailcheck == "") {
                        this.emailcheck = "请输入邮箱"
                    } else if (this.checkCode == "") {
                        this.checkCode = "验证码不能为空"
                    } else if (this.sendcode.length > 6) {
                        this.sendcode = "验证码长度不正确"
                    } else if (this.password == "") {
                        this.emailcheck = "请输入密码"
                    } else if (this.newpassword == "") {
                        this.newpassword = "请输入新密码"
                    } else if (this.password != this.newpassword) {
                        this.passwordprompt = "两次密码输入不一致"
                    } else {
                        let parm = {
                            email: this.emailcheck,
                            password: this.password,
                            checkCode: parseFloat(this.sendcode)
                        };
                        axios.post("/yesUser/forgetPassword", parm).then(res => {
                            if (res.data.code == 200) {
                                location.href = "/m/mloading"
                            } else if (res.data.code == -10003) {
                                this.sendcode = "验证码错误"
                            } else if (res.data.code == -10007) {
                                this.sendcode = "验证码过期"
                            }
                        });
                    }

                },
                Jump() {
                    window.location.href = "/m/mregistered"
                },
                retur() {
                    window.location.href = '/m'
                },
                setRem(itemNum) {
                    //设置字体rem
                    let size = itemNum || 38;
                    window.onresize = remSize;
                    remSize();
                    function remSize() {
                        let html = document.getElementsByTagName("html")[0],
                            w = html.clientWidth;
                        w = w > 768 ? 768 : w;
                        html.style.fontSize = w / size + "px";
                    }
                },
                fontSize(itemnum) {
                    let html = document.getElementsByTagName("html")[0];
                    let a = html.style.fontSize;
                },
            }
        })
    </script>
</body>

</html>